<template>
  <el-drawer
    ref="elDrawer"
    class="base-drawer"
    :size="fullMainWidth ? `calc(100% - ${sideBarWidth})` : $attrs.size"
    append-to-body
    :close-on-press-escape="false"
    :wrapper-closable="false"
    v-on="$listeners"
    v-bind="$attrs"
  >
    <div class="base-drawer-container">
      <slot></slot>
    </div>
    <slot name="footer" v-if="footer">
      <div class="base-drawer-footer">
        <el-button v-if="cancelVisible" v-bind="cancelButtonProps" @click="onCancel">
          {{ cancelText }}
        </el-button>
        <el-button v-if="okVisible" v-bind="okButtonProps" @click="onOk">
          {{ okText }}
        </el-button>
      </div>
    </slot>
  </el-drawer>
</template>

<script>

// 基础抽屉
// @group Dialog
export default {
  name: 'BaseDrawer',
  props: {
    // 宽度 = 100% - 菜单宽度
    fullMainWidth: {
      type: Boolean,
      default: false,
    },
    // 显示底部
    footer: {
      type: Boolean,
      default: true,
    },
    // 显示取消按钮
    cancelVisible: {
      type: Boolean,
      default: true,
    },
    // 取消按钮属性
    cancelButtonProps: {
      type: Object,
      default: () => ({})
    },
    // 取消按钮文字
    cancelText: {
      type: String,
      default: '取 消',
    },
    // 显示确定按钮
    okVisible: {
      type: Boolean,
      default: true,
    },
    // 确定按钮属性
    okButtonProps: {
      type: Object,
      default: () => ({
        type: 'primary'
      })
    },
    // 确定按钮文字
    okText: {
      type: String,
      default: '确 定',
    },
  },
  data() {
    return {
      sideBarWidth: 0
    }
  },
  watch: {
    '$attrs.visible': {
      immediate: true,
      handler(nv) {
        this.$nextTick(() => {
          this.sideBarWidth = document.body.querySelector('.layout .sidebar-container').getBoundingClientRect().width + 'px';
        })
      }
    }
  },
  methods: {
    // 弹窗关闭事件
    onCancel() {
      this.$emit('cancel')
    },
    // 确认按钮事件
    onOk() {
      this.$emit('ok')
    },
  }
}
</script>

<style scoped lang="scss">
.base-drawer.full-main-width ::v-deep .el-drawer {
  width: calc(100% - 220px) !important;
}
.base-drawer {
  display: flex;
  flex-direction: column;

  &::v-deep {
    .el-drawer__header {
      margin-bottom: 0;
      padding: 12px 16px;
    }
    .el-drawer__body {
      flex: 1;
      display: flex;
      flex-direction: column;
      font-size: 14px;
    }
  }
}
.base-drawer-container {
  padding: 16px;
  flex: 1;
  // overflow: auto;
  overflow: hidden auto;
}
.base-drawer-footer {
  flex: none;
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #E6E7EB;
}
</style>
